<template>
  <div class="arrow-test-event">
    <h1>{{ message }}</h1>
    <p>js常见的函数声明方式funtion关键字和ES6的箭头函数。</p>
    <h4>箭头函数和普通函数的区别:</h4>
    <ol>
        <li>this指向外层的this</li>
        <li>由于没有自己的this,不能作为类的构造函，new一个箭头函数会报错</li>
        <li>没有arguments</li>
        <li>有隐式的返回值</li>
    </ol>
    <section>
        <h3>1、this指向外层的this</h3>
        <code>
            <pre>
            const myObject = {
                myMethod(items) {
                    console.error(this); //  "myObject"  
                    let self = this; 
                    const callback = () => {
                        console.error(this); // "myObject"  
                        console.error(self == this); // true
                    };
                    items.forEach(callback);
                }
            };
            myObject.myMethod([123]);

            const myObject1 = {
                myMethod(items) {
                    console.error(this); //  "myObject"  
                    let self = this; 
                    function callback (){
                        console.error(this); // "Window" or "undefined"  
                        console.error(self == this); // false
                    };
                    items.forEach(callback);
                }
            };
            myObject1.myMethod([123]);
            </pre>
        </code>
    </section>
    <section>
        <h3>2、由于没有自己的this,不能作为类的构造函，new一个箭头函数会报错</h3>
        <code>
            <pre>
                let person = (params) => {
                    this.name = params;
                };

                let littleMan = new person(1);// Uncaught TypeError: person is not a constructor
            </pre>
        </code>
    </section>
    <section>
        <h3>3、没有arguments</h3>
        <code>
            <pre>
                let test = () => {
                    console.error(arguments);
                };
                test(); // Uncaught ReferenceError: arguments is not defined
            </pre>
        </code>
    </section>
    <section>
        <h3>4、有隐式的返回值</h3>
        <p>默认会有一个return</p>
    </section>
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component({
        // 所有的组件选项都可以放在这里
    })
    export default class arrow extends Vue {
        // data 在这
        message: string = '箭头函数'
        created(){
            
        }
    }
</script>
<style lang="scss">
.arrow-test-event{
}
</style>